<template>
  <div class="page" v-loading="loading">
    <tz-filter @change="filterChange" :filter-data="filterData">
      <template v-slot:default="scope">
        <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model.trim="scope.data.deviceName" placeholder="设备名称"></el-input>
        <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model.trim="scope.data.orgName" placeholder="单位名称"></el-input>
        <el-input class="table-filter-item" :maxlength="100" size="small" clearable v-model.trim="scope.data.ipStr" placeholder="请输入ip地址"></el-input>
        <el-cascader
                size="small"
                clearable
                class="table-filter-item"
                v-model="scope.data.deviceType"
                :options="deviceTypeList"
                placeholder="请选择设备分类"
                :props="{
                     value: 'key',
                     label: 'keyName'
                 }">
        </el-cascader>
      </template>
    </tz-filter>
    <tz-table
            ref="tzTable"
            highlight-current-row
            size="mini"
            :data="loadData">
      <el-table-column
              prop="name"
              show-overflow-tooltip
              v-if="columnConfigData.includes('设备名称')"
              label="设备名称">
        <template slot-scope="scope">
          <high-light :value="scope.row.name || scope.row.ip" :keyword="filterData.deviceName"></high-light>
        </template>
      </el-table-column>
      <el-table-column
              prop="summaryContentList"
              show-overflow-tooltip
              v-if="columnConfigData.includes('故障描述')"
              label="故障描述">
        <template slot-scope="scope">
          <el-popover
                  placement="top-start"
                  title="详情"
                  trigger="hover">
            <p class="desc-text text-ellipsis" slot="reference">{{ scope.row.summaryContentList[0] }}</p>
            <div class="desc-container">
              <p v-for="(text, index) in scope.row.summaryContentList" :key="index">{{index + 1}}、 {{text}}</p>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
              prop="orgName"
              v-if="columnConfigData.includes('单位名称')"
              label="单位名称">
        <template slot-scope="scope">
          <high-light :value="scope.row.resourceGroupName" :keyword="filterData.orgName"></high-light>
        </template>
      </el-table-column>
      <el-table-column
              prop="ip"
              show-overflow-tooltip
              v-if="columnConfigData.includes('ip地址')"
              label="ip地址">
        <template slot-scope="scope">
          <high-light :value="scope.row.ip" :keyword="filterData.ipStr"></high-light>
        </template>
      </el-table-column>
      <el-table-column
              prop="deviceType"
              v-if="columnConfigData.includes('故障设备分类')"
              label="故障设备分类">
        <template slot-scope="scope">
          <el-tag
                  size="mini"
                  type="success"
          >{{deviceTypeMap[scope.row.deviceType.split('\\').shift()] || '-'}}/{{scope.row.deviceTypeTwo}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
              prop="faultNum"
              width="80"
              label="故障次数"
              v-if="columnConfigData.includes('故障次数')"
              :formatter="(row) => {
                  return row.faultNum || row.faultNum === 0 ? `${row.faultNum}` : '-'
                }">
      </el-table-column>
      <el-table-column
              prop="analysisStatus"
              width="100px"
              v-if="columnConfigData.includes('解析状态')"
              label="解析状态">
        <template slot-scope="scope">
          <el-tag
                  size="mini"
                  :type="scope.row.analysisStatus ? 'success' : ''"
          >{{scope.row.analysisStatus ? '已解析' : '未解析'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
              prop="dealTime"
              show-overflow-tooltip
              label="分析时间"
              v-if="columnConfigData.includes('分析时间')"
              :formatter="(row) => {
                 return row.analysisTime ? moment(row.analysisTime).format('YYYY-MM-DD HH:mm:ss') : '-'
               }">
      </el-table-column>
      <el-table-column
              prop="createTime"
              show-overflow-tooltip
              v-if="columnConfigData.includes('故障时间')"
              label="故障时间"
              :formatter="(row) => {
                       return row.lastcurremce || '-'
                     }">
      </el-table-column>
      <el-table-column
              prop="createTime"
              show-overflow-tooltip
              v-if="columnConfigData.includes('创建时间')"
              label="创建时间"
              :formatter="(row) => {
                       return row.createTime ? moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
      </el-table-column>
      <el-table-column
              prop="syncTime"
              show-overflow-tooltip
              v-if="columnConfigData.includes('同步时间')"
              label="同步时间"
              :formatter="(row) => {
                       return row.syncTime ? moment(row.syncTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
      </el-table-column>
      <el-table-column
              fixed="right"
              label="操作"
              width="150">
        <template slot="header">
          <div class="flex-row flex-item">
            <div class="flex1">操作</div>
            <i style="font-size: 18px; cursor: pointer" class="el-icon-s-tools" @click="openColConf"></i>
          </div>
        </template>
        <template slot-scope="scope">
          <el-button @click="deleteItem(scope.row)" type="text" size="small">删除</el-button>
          <el-button v-if="scope.row.analysisStatus" @click="showResult(scope.row)" type="text" size="small">查看结果</el-button>
        </template>
      </el-table-column>
    </tz-table>
    <el-dialog
            title="故障结果详情"
            :visible.sync="dialogVisible"
            width="1000px"
            style="text-align: left">
      <div class="content-container">
        <template v-if="curRow && curRow.summaryContentList">
          <div style="padding-bottom: 20px">
            <h4 class="content-title">故障描述：</h4>
            <p style="padding: 5px 0" v-for="(text, index) in curRow.summaryContentList" :key="index">{{index + 1}}、{{text}}</p>
          </div>
        </template>
        <div>
          <h4 class="content-title">错误原因：</h4>
          <template v-if="resultObj.faultReason">
            <p style="padding: 5px 0" v-for="(text, index) in resultObj.faultReason.split('#%&')" :key="index">{{index + 1}}、{{text}}</p>
          </template>
          <p v-else>暂无</p>
        </div>
        <br>
        <div>
          <h4 class="content-title">处理建议：</h4>
          <template v-if="resultObj.suggestions">
            <p style="padding: 5px 0" v-for="(text, index) in resultObj.suggestions.split('#%&')" :key="index">{{index + 1}}、{{text}}</p>
          </template>
          <p v-else>暂无</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <column-config ref="columnConf" @onSure="getConfig" :page-key="pageKey"></column-config>
  </div>
</template>

<script>
import { networks } from '@/assets/dict'
import columnConfig from '@/components/columnConfig'
import moment from 'moment'
import { mapState } from 'vuex'
import {getStorage} from '@/utils/storage';

export default {
  name: 'query',
  components: {
    columnConfig
  },
  data() {
    return {
      moment,
      pageKey: 'fault_query_page_column_config',
      columnConfigData: null,
      columnNames: ['设备名称', '故障描述', '单位名称', '故障设备分类', 'ip地址', '故障次数', '解析状态', '分析时间', '故障时间', '创建时间', '同步时间'],
      networks,
      filterData: {
        deviceType: [],
        network: 'JZW',
        deviceName: '',
        orgName: '',
      },
      dialogVisible: false,
      resultObj: {
        faultReason: '',
        suggestions: ''
      },
      loading: false,
      ipStr: '',
      curRow: null,
      isEq: 0
    }
  },
  created() {
    this.columnConfigData = getStorage(this.pageKey) || [...this.columnNames]
  },
  methods: {
    openColConf() {
      this.$refs.columnConf.open(this.columnNames)
    },
    getConfig(res) {
      this.columnConfigData = res
    },
    filterChange(res) {
      this.isEq = res.isEq
      this.refresh()
    },
    showResult(row) {
      this.loading = true
      this.curRow = row
      this.$http.get('/fault/getAnalysisResult', {
        params: {
          id: row.id
        }
      }).then(res => {
        this.dialogVisible = true
        this.resultObj = res
      }).catch(err => {
        this.$TZmessage.error(err.msg || '加载数据失败')
      }).finally(() => {
        this.loading = false
      })
    },
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
    loadData(params) {
      const { network, deviceType, orgName, deviceName, ipStr } = this.filterData
      return this.$http.get('/fault/getFaultPage', {
        params: {
          network,
          deviceType: deviceType[0],
          deviceTypeTwo: deviceType[1],
          orgName,
          deviceName,
          ip: ipStr,
          isEq: this.isEq,
          ...params
        }
      }).then(res => {
        return {
          data: res.records || [],
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.error || '获取数据失败')
      })
    },
    deleteItem(row) {
      // this.$confirm('是否删除所选项').then(res => {
      this.$confirm('是否删除所选项').then(() => {
        this.loading = true
        this.$http.delete('/fault/deleteFaultData', {
          params: {
            id: row.id
          }
        // }).then(res => {
        }).then(() => {
          this.$TZmessage.success('删除成功')
        }).catch(err => {
          this.$TZmessage.error(err.msg || '删除失败')
        }).finally(() => {
          this.loading = false
          this.refresh()
        })
      // }).catch(err => {
      }).catch(() => {
        console.log('取消执行')
      })
    },
    // handleAnalysis({id}) {
    handleAnalysis() {
      this.loading = true
      this.$http.get('/fault/analysisFault', {
        params: {
          id: row.id
        }
      }).then(() => {
        this.$TZmessage.success('操作成功')
        this.refresh()
      }).catch(err => {
        this.$TZmessage.error(err.msg || '操作失败')
      }).finally(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  computed: {
    ...mapState('dict', ['deviceTypeList', 'deviceTypeMap']),
  }
}
</script>

<style lang="scss" scoped>
.desc-text {
  color: #409EFF;
}
.desc-container {
  max-height: 200px;
  overflow: auto;
}
.content-container {
  .content-title {
    padding-bottom: 10px;
  }
}
::v-deep .el-dialog__body {
  padding: 10px 20px;
  max-height: 60vh;
  overflow: auto;
}
</style>